@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using jiuyuan.数据.共享类

<div class="admin-container">
    <div class="admin-header">
        <h3>技能管理</h3>
        <button class="btn-primary" @onclick="添加新技能">添加新技能</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="item-list">
                @foreach (var 技能 in 显示技能列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@技能.名称</h4>
                            <p>等级要求: @技能.等级要求</p>
                            <p>消耗魔法值: @技能.消耗魔法值</p>
                            <p>元素类型: @GetElementType((int)技能.元素类型)</p>
                            <p>效果数量: @技能.效果ID列表.Count</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看技能详情(技能)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑技能(技能)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除技能(技能.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 技能详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>技能详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的技能 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>技能名称:</label>
                        <span>@选中的技能.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的技能.等级要求</span>
                    </div>
                    <div class="detail-item">
                        <label>消耗魔法值:</label>
                        <span>@选中的技能.消耗魔法值</span>
                    </div>
                    <div class="detail-item">
                        <label>冷却时间:</label>
                        <span>@选中的技能.冷却时间 秒</span>
                    </div>
                    <div class="detail-item">
                        <label>元素类型:</label>
                        <span>@GetElementType((int)选中的技能.元素类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>目标类型:</label>
                        <span>@GetTargetType((int)选中的技能.目标类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>图标:</label>
                        <span>@选中的技能.图标</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的技能.描述</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>技能效果:</label>
                        <div class="effects-preview">
                            @if (选中的技能.效果ID列表.Any())
                            {
                                @foreach (var effectId in 选中的技能.效果ID列表)
                                {
                                    var effectConfig = 效果管理器.获取效果配置(effectId);
                                    if (effectConfig != null)
                                    {
                                        <div class="effect-preview">
                                            <span class="effect-type">@effectConfig.名称</span>
                                            <span class="effect-desc">@效果管理器.获取效果描述(effectConfig)</span>
                                        </div>
                                    }
                                }
                            }
                            else
                            {
                                <span class="no-effects">无效果</span>
                            }
                        </div>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的技能.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的技能.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑技能弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑技能" : "添加新技能")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前技能 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="skillName">技能名称:</label>
                        <input type="text" id="skillName" @bind="当前技能.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillLevel">等级要求:</label>
                        <input type="number" id="skillLevel" @bind="当前技能.等级要求" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillManaCost">消耗魔法值:</label>
                        <input type="number" id="skillManaCost" @bind="当前技能.消耗魔法值" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillCooldown">冷却时间(秒):</label>
                        <input type="number" id="skillCooldown" @bind="当前技能.冷却时间" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillElementType">元素类型:</label>
                        <select id="skillElementType" @bind="当前技能.元素类型" class="form-control">
                            <option value="0">无</option>
                            <option value="1">火</option>
                            <option value="2">水</option>
                            <option value="3">风</option>
                            <option value="4">土</option>
                            <option value="5">物理</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillTargetType">目标类型:</label>
                        <select id="skillTargetType" @bind="当前技能.目标类型" class="form-control">
                            <option value="0">自身</option>
                            <option value="1">友方单体</option>
                            <option value="2">友方群体</option>
                            <option value="3">敌方单体</option>
                            <option value="4">敌方群体</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillIcon">图标:</label>
                        <input type="text" id="skillIcon" @bind="当前技能.图标" class="form-control" />
                    </div>
                    <div class="form-group full-width">
                        <label for="skillDescription">描述:</label>
                        <textarea id="skillDescription" @bind="当前技能.描述" class="form-control" rows="3"></textarea>
                    </div>
                    
                    <!-- 效果配置区域 -->
                    <div class="form-group full-width">
                        <label>技能效果:</label>
                        <div class="effects-container">
                            <div class="effects-header">
                                <span>效果列表</span>
                                <button type="button" class="btn-secondary small" @onclick="添加效果">添加效果</button>
                            </div>
                            
                            @if (当前技能.效果ID列表.Any())
                            {
                                @for (int i = 0; i < 当前技能.效果ID列表.Count; i++)
                                {
                                    var effectId = 当前技能.效果ID列表.ToList()[i];
                                    var effectConfig = 效果管理器.获取效果配置(effectId);
                                    <div class="effect-item">
                                        <div class="effect-header">
                                            @if (effectConfig != null)
                                            {
                                                <span>@effectConfig.名称 (@effectConfig.效果类型)</span>
                                            }
                                            else
                                            {
                                                <span>未知效果</span>
                                            }
                                            <button type="button" class="btn-danger small" @onclick="() => 移除效果(i)">移除</button>
                                        </div>
                                        
                                        @if (effectConfig != null)
                                        {
                                            <div class="effect-params">
                                                <p>@效果管理器.获取效果描述(effectConfig)</p>
                                            </div>
                                        }
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="no-effects">暂无效果，点击"添加效果"按钮添加</div>
                            }
                        </div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存技能">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<!-- 效果选择弹窗 -->
<div class="modal" style="display: @(显示效果选择弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>选择效果</h3>
            <button class="close-button" @onclick="关闭效果选择弹窗">&times;</button>
        </div>
        <div class="modal-body">
            <div class="search-box">
                <input type="text" @bind="效果搜索关键词" placeholder="搜索效果..." class="form-control" @oninput="应用效果搜索" />
            </div>
            <div class="effects-list">
                @foreach (var effect in 过滤后的效果列表)
                {
                    <div class="effect-item-select" @onclick="() => 选择效果(effect.Id)">
                        <h4>@effect.名称</h4>
                        <p>@effect.效果类型</p>
                        <p>@效果管理器.获取效果描述(effect)</p>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<style>
    .modal-content.large {
        max-width: 900px;
    }

    /* 效果容器样式 */
    .effects-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .effects-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .effects-header span {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-item {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
        background-color: rgba(40, 40, 80, 0.8);
    }

    .effect-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .effect-params {
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
    }

    .effects-preview {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .effect-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    .effect-type {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-desc {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .no-effects {
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 20px;
    }

    .search-box {
        margin-bottom: 15px;
    }

    .effects-list {
        max-height: 400px;
        overflow-y: auto;
    }

    .effect-item-select {
        padding: 10px;
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: rgba(40, 40, 80, 0.8);
        cursor: pointer;
    }

    .effect-item-select:hover {
        background-color: rgba(60, 60, 100, 0.8);
    }

    .effect-item-select h4 {
        color: #b19cd9;
        margin: 0 0 5px 0;
    }

    .effect-item-select p {
        color: #a0a0e0;
        margin: 2px 0;
        font-size: 0.9rem;
    }
</style>

@code {
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public 效果管理器 效果管理器 { get; set; } = default!;
    [Inject] public ILogger<技能管理> Logger { get; set; } = default!;

    private List<游戏元素> 技能列表 = [];
    private List<游戏元素> 显示技能列表 = [];
    private List<效果配置> 所有效果列表 = [];
    private List<效果配置> 过滤后的效果列表 = [];
    private bool 数据已加载 = false;

    private 游戏元素 当前技能 = new 游戏元素 { 类型 = 物品类型.技能 };
    private 游戏元素 选中的技能 = new 游戏元素 { 基础属性 = new 属性配置() };
    private bool IsEditing = false;
    private Guid 编辑中的技能Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;
    private bool 显示效果选择弹窗 = false;
    private string 效果搜索关键词 = "";

    protected override async Task OnInitializedAsync()
    {
        await 加载技能数据();
        await 加载效果数据();
    }

    private async Task 加载技能数据()
    {
        try
        {
            var allElements = await 配置加载器.获取所有游戏元素();
            技能列表 = allElements.Where(e => e.类型 == 物品类型.技能).ToList();
            显示技能列表 = 技能列表;
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载技能数据时发生错误");
        }
    }

    private async Task 加载效果数据()
    {
        try
        {
            所有效果列表 = await 效果管理器.获取所有效果配置From数据库();
            过滤后的效果列表 = 所有效果列表;
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载效果数据时发生错误");
        }
    }

    private void 查看技能详情(游戏元素 技能)
    {
        选中的技能 = 技能;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新技能()
    {
        当前技能 = new 游戏元素
        {
            Id = Guid.NewGuid(),
            创建时间 = DateTime.Now,
            更新时间 = DateTime.Now,
            效果列表 = new List<技能效果>(),
            效果ID列表 = new List<Guid>(),
            类型 = 物品类型.技能 // 设置类型为技能
        };
        IsEditing = false;
        编辑中的技能Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑技能(游戏元素 技能)
    {
        // 深拷贝技能对象，避免直接修改原始数据
        当前技能 = new 游戏元素
        {
            Id = 技能.Id,
            名称 = 技能.名称,
            描述 = 技能.描述,
            等级要求 = 技能.等级要求,
            图标 = 技能.图标,
            创建时间 = 技能.创建时间,
            更新时间 = DateTime.Now,
            消耗魔法值 = 技能.消耗魔法值,
            冷却时间 = 技能.冷却时间,
            元素类型 = 技能.元素类型,
            目标类型 = 技能.目标类型,
            类型 = 技能.类型, // 保持类型
            效果ID列表 = new List<Guid>(技能.效果ID列表),
            效果列表 = 技能.效果列表.Select(e => e.深拷贝()).ToList()
        };
        IsEditing = true;
        编辑中的技能Id = 技能.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除技能(Guid 技能Id)
    {
        var 技能 = 显示技能列表.FirstOrDefault(s => s.Id == 技能Id);
        if (技能 != null)
        {
            显示技能列表.Remove(技能);
            技能列表.Remove(技能);
            await 配置加载器.删除游戏元素(技能Id);
            await 加载技能数据();
        }
    }

    // 效果管理方法
    private void 添加效果()
    {
        显示效果选择弹窗 = true;
        效果搜索关键词 = "";
        过滤后的效果列表 = 所有效果列表;
    }

    private void 移除效果(int index)
    {
        if (index >= 0 && index < 当前技能.效果ID列表.Count)
        {
            // 将ICollection<Guid>转换为List<Guid>以便操作
            var effectIds = 当前技能.效果ID列表.ToList();
            effectIds.RemoveAt(index);
            当前技能.效果ID列表 = effectIds;
            StateHasChanged();
        }
    }

    private void 选择效果(Guid effectId)
    {
        // 添加效果到当前技能
        if (!当前技能.效果ID列表.Contains(effectId))
        {
            当前技能.效果ID列表.Add(effectId);
        }
        
        关闭效果选择弹窗();
    }

    private void 关闭效果选择弹窗()
    {
        显示效果选择弹窗 = false;
    }

    private void 应用效果搜索()
    {
        if (string.IsNullOrWhiteSpace(效果搜索关键词))
        {
            过滤后的效果列表 = 所有效果列表;
        }
        else
        {
            过滤后的效果列表 = 所有效果列表
                .Where(e => e.名称.Contains(效果搜索关键词, StringComparison.OrdinalIgnoreCase) ||
                           e.效果类型.Contains(效果搜索关键词, StringComparison.OrdinalIgnoreCase))
                .ToList();
        }
    }

    private async Task 保存技能()
    {
        if (string.IsNullOrWhiteSpace(当前技能.名称))
            return;

        try
        {
            // 更新时间
            当前技能.更新时间 = DateTime.Now;
            
            // 如果没有创建时间，设置为当前时间
            if (当前技能.创建时间 == DateTime.MinValue)
            {
                当前技能.创建时间 = DateTime.Now;
            }

            // 确保效果ID列表与效果列表同步
            当前技能.效果ID列表 = 当前技能.效果列表.Select(e => e.Id).ToList();

            // 保存到数据库
            await 配置加载器.保存游戏元素(当前技能);
            
            // 更新显示列表
            if (!IsEditing)
            {
                显示技能列表.Add(当前技能);
                技能列表.Add(当前技能);
            }
            else
            {
                var existingSkill = 显示技能列表.FirstOrDefault(s => s.Id == 编辑中的技能Id);
                if (existingSkill != null)
                {
                    var index = 显示技能列表.IndexOf(existingSkill);
                    显示技能列表[index] = 当前技能;
                    
                    var originalIndex = 技能列表.IndexOf(existingSkill);
                    技能列表[originalIndex] = 当前技能;
                }
            }

            显示编辑弹窗 = false;
            await 加载技能数据();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存技能时发生错误");
        }
    }

    private string GetElementType(int 元素类型) => 元素类型 switch
    {
        0 => "无",
        1 => "火", 
        2 => "水",
        3 => "风",
        4 => "土",
        5 => "物理",
        _ => "未知"
    };

    private string GetTargetType(int 目标类型) => 目标类型 switch
    {
        0 => "自身",
        1 => "友方单体", 
        2 => "友方群体",
        3 => "敌方单体",
        4 => "敌方群体",
        _ => "未知"
    };
}